<template>
  <div>
    <el-card>
      <el-row>
        <el-col>
          <el-button
            type="primary"
            @click="showCateDialog()"
            style="margin-left: 5px"
            >添加分类</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-tag
              :key="tag"
              v-for="tag in scope.row.lib"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="scope.row.inputVisible"
              v-model="scope.row.inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm(scope.row)"
              @blur="handleInputConfirm(scope.row)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(scope.row)"
              >+ New Tag</el-button
            >
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="ID" prop="id"> </el-table-column>
      <el-table-column label="分类名称" prop="name"> </el-table-column>

      <el-table-column label="操作">
        <template scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEdit(scope.$index, scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDel(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisible">
      <!-- 添加分类的表单 -->
      <el-form
        :model="addCateForm"
        ref="addCateFormRef"
        :rules="addCateFormRules"
        label-width="100px"
      >
        <el-form-item label="参数名称:" prop="SpecificationName">
          <el-input v-model="addCateForm.SpecificationName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCateclick">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑分类名称 -->
    <el-dialog
      title="编辑分类名称"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form ref="form" :model="form" :rules="addCateFormRules">
        <el-form-item
          label="参数名称"
          :label-width="formLabelWidth"
          prop="SpecificationName"
        >
          <el-input
            v-model="form.SpecificationName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSpe,
  addSpe,
  getSpechild,
  addSpechild,
  deleteSpe,
  editSpe,
  deleteSpeChild,
} from "../../api/spe";
export default {
  data() {
    return {
      dynamicTags: [],

      formLabelWidth: "120px",
      allRole: [],
      //子级
      parentCateList: {},
      addCateDialogVisible: false,
      // 添加分类表单数据对象
      addCateForm: {
        // 将要添加的分类名称
        SpecificationName: "",
        // 父级分类的id
        parentLevelId: 0,
      },
      dialogFormVisible: false,
      form: {
        SpecificationName: "",
        id: 0,
        newIndex: 0,
      },
      listLoading: false,
      // 表格数据
      tableData: [],
      selectedKeys: {},
      addCateFormRules: {
        name: [
          { required: true, message: "请输入分参数名称", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    setTimeout(() => {
      this.AllSpeChild();
    }, 200);
    this.AllSpe();
  },

  methods: {
    //查找所有父级参数
    AllSpe() {
      getSpe()
        .then(({ data }) => {
          console.log(data.data);
          let arr = data.data;
          arr.forEach((item) => {
            let obj = {
              id: item.id,
              name: item.specificationName,
              lib: [],
              inputVisible: false,
              inputValue: "",
            };
            this.tableData.push(obj);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查找所有子级参数
    AllSpeChild() {
      getSpechild()
        .then(({ data }) => {
          this.tableData.forEach((Element) => {
            let newArr = [];
            data.data.forEach((item) => {
              if (item.specificationId == Element.id) {
                newArr.push(item.spchildrenName);
              }
            });
            Element.lib = newArr;
            console.log(newArr);
          });
          console.log(data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除子级参数
    handleClose(tag) {
      console.log(tag);
      let obj = {
        SpecificationName: tag,
      };
      console.log(obj);
      deleteSpeChild(obj)
        .then(({ data }) => {
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
      this.tableData.forEach((Element) => {
        // console.log(Element.lib);
        // console.log(Element.lib.indexOf(tag));
        if (Element.lib.indexOf(tag) >= 0) {
          Element.lib.splice(Element.lib.indexOf(tag), 1);
        } else {
          console.log("aa");
        }
      });
    },
    //展示
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick((item) => {
        console.log(item);
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //添加子级参数
    handleInputConfirm(row) {
      console.log(this.tableData);
      if (row.inputValue == "") {
        this.$message({
          showClose: true,
          message: "添加的名称不能为空",
          type: "error",
        });
      } else {
        this.tableData.forEach((item) => {
          console.log(row.id);
          console.log(item.id);
          console.log(row.inputValue);

          if (item.id == row.id) {
            console.log(item.lib);
            let dataobj = {
              SpchildrenName: row.inputValue,
              PartId: row.id,
            };
            addSpechild(dataobj)
              .then(({ data }) => {
                console.log(data);
                if (data.data == "") {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: "error",
                  });
                  row.inputVisible = false;
                } else {
                  item.lib.push(row.inputValue);
                }
              })
              .catch((err) => {
                console.log(err);
              });
              // item.lib.push(row.inputValue);
          } else {
            console.log(item.lib);

            console.log("aa");
          }
        });
        // row.inputValue = "";
      }
      
      row.inputVisible = false;
    },
    parentCateChanged(values) {
      console.log(values);
      // 如果selectedKeys数组中的length大于0，证明选中的父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的ID
        this.addCateForm.parentLevelId =
          this.selectedKeys[this.selectedKeys.length - 1];

        // eslint-disable-next-line no-useless-return
        return;
      } else {
        // 父级分类的id
        this.addCateForm.parentLevelId = 0;
      }
    },
    //添加
    showCateDialog() {
      this.addCateDialogVisible = true;
    },
    // 提交添加父级参数(确定按钮)
    addCateclick() {
      this.$refs.addCateFormRef.validate((valid) => {
        if (valid) {
          console.log(this.addCateForm);
          addSpe(this.addCateForm)
            .then(({ data }) => {
              console.log(data);
              let da = data.data;
              if (da == "") {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: "error",
                });
              } else {
                let datobj = {
                  id: da.id,
                  name: da.specificationName,
                  lib: [],
                  inputVisible: false,
                  inputValue: "",
                };
                this.tableData.push(datobj);
                this.addCateForm.SpecificationName = "";
                this.addCateDialogVisible = false;

                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: "success",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message.error("该空不能为空，请填写完毕重新提交");
        }
      });
    },
    //编辑父类参数
    handleEdit(index, row) {
      console.log(row);
      this.form.SpecificationName = row.name;
      this.form.id = row.id;
      this.form.newIndex = index;
      this.dialogFormVisible = true;
    },
    // 修改分类名称
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(valid);
          editSpe(this.form)
            .then(({ data }) => {
              console.log(data);
              this.$message({
                showClose: true,
                message: data.msg,
                type: "success",
              });
              window.location.reload();
            })
            .catch((err) => {
              console.log(err);
            });
          console.log(this.form);
          //   editType(this.form.id, this.form).then(({ data }) => {
          //     this.tableData.splice(this.form.newIndex,data.data);
          //     this.dialogFormVisible = false;
          //   });
        } else {
          this.$message.error("该空不能为空，请填写完毕重新提交");
        }
      });
    },
    //删除父级分类
    handleDel(index, row) {
      console.log(index, row);
      deleteSpe(row.id)
        .then(({ data }) => {
          console.log(data);
          this.tableData.splice(index, 1);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>